import React, { Component } from 'react'
import "./index.scss"
import {Row,Col,Carousel,Image} from "antd"
import * as echarts from "echarts"
import "./index.scss"
import  'echarts-liquidfill'
import {connect} from "react-redux"

@connect(
    state=>{
        return {
            banner:state.getIn(['data','banner'])
        }
    }
)
export default class HomeIndex extends Component {
    componentDidMount(){
        // 天气 仪表盘
        var chartDom = document.getElementById('eachartBoxThree');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [{
                    type: 'gauge',
                    center: ["50%", "60%"],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#FFAB91'
                    },
                    progress: {
                        show: true,
                        width: 30
                    },

                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 30
                        }
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -52,
                        length: 14,
                        lineStyle: {
                            width: 3,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: -20,
                        color: '#999',
                        fontSize: 20
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        height: '15%',
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 20,
                        fontWeight: 'bolder',
                        formatter: '26.4 °C',
                        color: 'auto'
                    },
                    data: [{
                        value: 20
                    }]
                },

                {
                    type: 'gauge',
                    center: ["50%", "60%"],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    itemStyle: {
                        color: '#FD7347',
                    },
                    progress: {
                        show: true,
                        width: 8
                    },

                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 20,
                    }]

                }
            ],
        };

        // setInterval(function() {
        //     let random = (Math.random() * 60).toFixed(2) - 0;
        //     option.series[0].data[0].value = random;
        //     option.series[1].data[0].value = random;
        //     myChart.setOption(option, true);
        // }, 2000);

        option && myChart.setOption(option);

        // 车位管理
        var chartDom = document.getElementById('eachartBoxFour');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title:{
                text: "当前剩余车位",
                left: "center"
            },
            // backgroundColor: '#ccc', //背景色
            series: [{
                type: 'liquidFill',
                data: [0.6],
                color: ['#FFAB91'],
                itemStyle: {         //普通样式
                    opacity: 0.6
                },
                emphasis: {
                    itemStyle: {     //悬停样式
                        opacity: 0.9
                    }
                }
            }]
    
        };
     
        option && myChart.setOption(option);
    }
    render() {
        const {
            banner 
        }  = this.props
        return (
            <div className="site-layout-background" style={{ padding: 24, minHeight: 760 }}>
                {/* <h2>this is home index</h2> */}
                <Row style={{width:"100%"}}>
                    <Col span={23} offset={0} style={{margin:"20px 20px"}}>
                        <div id="eachartBoxOne" style={{width:"100%",height:400,border:"1px solid #ddd"}}>
                            <Carousel effect="fade" autoplay="true">
                                {
                                    banner.map((l,i)=>{
                                        return(
                                            <div key={i} style={{padding:"0 20px",width:"100%",height:"100%"}}>
                                                <img src={l.toJS().imgUrl} alt="" style={{width:"100%",height:"100%"}}/>
                                            </div>
                                        )
                                    })
                                }
                            </Carousel>
                        </div>
                    </Col>
                    <Col span={11} offset={0} style={{margin:"20px 20px"}}>
                        <div id="eachartBoxThree" style={{width:"100%",height:300,border:"1px solid #ddd"}}></div>
                    </Col>
                    <Col span={11} offset={1} style={{margin:"20px 20px"}}>
                        <div id="eachartBoxFour" style={{width:"100%",height:300,border:"1px solid #ddd"}}></div>
                    </Col>
                </Row>
            </div>
        )
    }
}
